<template>
  <section class="detail-content">
    <div class="detail-materials">
      <p>
        <strong>菜品介绍：{{ menuInfo.product_story }}</strong>
      </p>
      <h2>用料</h2>

      <div
        class="detail-materials-box clearfix"
        v-if="menuInfo.raw_material.main_material.length"
      >
        <h3>主料</h3>
        <ul>
          <li
            v-for="item in menuInfo.raw_material.main_material"
            :key="item._id"
          >
            {{ item.name }}
            <span>{{ item.specs }}</span>
          </li>
        </ul>
      </div>

      <div
        class="detail-materials-box clearfix"
        v-if="menuInfo.raw_material.accessories_material.length"
      >
        <h3>辅料</h3>
        <ul>
          <li
            v-for="item in menuInfo.raw_material.accessories_material"
            :key="item._id"
          >
            {{ item.name }}
            <span>{{ item.specs }}</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="detail-explain">
      <h2>{{ menuInfo.title }}的做法</h2>

      <section
        class="detail-section clearfix"
        v-for="(item, index) in menuInfo.steps"
        :key="item._id"
      >
        <em class="detail-number">{{ index + 1 }}.</em>
        <div class="detail-explain-desc">
          <p>{{ item.describe }}</p>
          <img v-if="item.img_url" :src="item.img_url" alt="" class="conimg" />
        </div>
      </section>

      <div class="skill">
        <h2>烹饪技巧</h2>
        <p>{{ menuInfo.skill }}</p>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  },
};
</script>

<style>
.detail-content {
  margin-top: 20px;
}
.detail-content h2 {
  font-size: 24px;
  color: #333;
  height: 66px;
  line-height: 66px;
  border-bottom: 1px solid #eee;
  text-indent: 24px;
}
.detail-materials {
  background-color: #fff;
}
.detail-materials p {
  line-height: 24px;
  font-size: 14px;
  padding: 20px 24px 10px;
  color: #666;
}
.detail-materials-box {
  margin-bottom: 20px;
}
.detail-materials-box h3 {
  width: 48px;
  height: 22px;
  color: #999;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  text-align: center;
  line-height: 24px;
  margin: 14px 5px 14px 25px;
  float: left;
}
.detail-materials-box ul {
  float: left;
  width: 910px;
}
.detail-materials-box ul li {
  float: left;
  box-sizing: border-box;
  height: 54px;
  line-height: 54px;
  margin: 0 5px 5px 5px;
  padding: 0 10px;
  border: 1px solid #eee;
}
.detail-explain {
  background-color: #fff;
  padding-bottom: 20px;
}
.detail-section .detail-number {
  font-size: 50px;
  color: #ff3232;
  font-style: italic;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  height: 50xp;
  width: 100px;
  display: block;
  float: left;
  line-height: 50px;
}
.detail-section .detail-explain-desc {
  float: left;
  width: 650px;
  overflow: hidden;
}
.detail-explain-desc p {
  line-height: 24px;
  color: #666;
  padding: 10px 20px 10px 0;
  position: relative;
  font-size: 14px;
}
.detail-explain-desc img {
  max-width: 550px;
}
.skill p {
  font-size: 12px;
  padding: 10px 0 0 50px;
  text-indent: 2em;
}
</style>